<template>
  <div>
    <table class="table report-table">
      <colgroup>
        <col width="10%" />
        <col width="15%" />
        <col width="30%" />
        <col width="15%" />
        <col width="15%" />
        <col width="15%" />
      </colgroup>
      <tbody>
        <tr>
          <td colspan="6" style="border: none" class="report-title">
            <h3 class="report-title">贵州省融资担保机构风险指标表</h3>
          </td>
        </tr>
        <tr>
          <td colspan="6" rowspan="4" style="border: none" class="text-left">
            <div>表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：DBG05</div>
            <div>制表机关：贵州省人民政府金融工作办公室</div>
            <div class="text-center">上报月度</div>
            <div class="d-flex justify-content-between">
              <div>填报单位：</div>
              <div>单位：万元、%</div>
            </div>
          </td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
          <td rowspan="2">序号</td>
          <td colspan="2" rowspan="2">项 目</td>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>
            年初数
            <br />
            (万元、%)
          </td>
          <td>本年度期间数(万元、%)</td>
          <td>
            期末数
            <br />
            (万元、%)
          </td>
        </tr>
        <tr v-for="(p, index) of reportDetail" :key="index">
          <td>{{ p.order_num }}</td>
          <td
            :rowspan="columns[p.order_num].rowspan || 1"
            class="text-left"
            :class="columns[p.order_num].class || 1"
          >
            {{ columns[p.order_num].label }}
          </td>
          <td class="text-left" v-if="columns[p.order_num].rowspan">
            {{ columns[p.order_num].label2 }}
          </td>
          <td :class="tdClass">
            <span v-if="isViewMode">{{ p.year_begin_funds || '-' }}</span>
            <el-input
              v-else
              v-model="p.year_begin_funds"
              v-input-number="{ min: 0, fixed: 2, max: columns[p.order_num].max }"
              placeholder="年初数"
            ></el-input>
          </td>
          <td :class="tdClass">
            <span v-if="isViewMode">{{ p.period_funds || '-' }}</span>
            <el-input
              v-else
              v-model="p.period_funds"
              v-input-number="{ min: 0, fixed: 2, max: columns[p.order_num].max }"
              placeholder="本年度期间数"
            ></el-input>
          </td>
          <td :class="tdClass">
            <span v-if="isViewMode">{{ p.period_end_funds || '-' }}</span>
            <el-input
              v-else
              v-model="p.period_end_funds"
              v-input-number="{ min: 0, fixed: 2, max: columns[p.order_num].max }"
              placeholder="期末数"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td colspan="6" class="text-left" style="border: none">
            <div class="d-flex justify-content-between">
              <div>单位负责人：</div>
              <div>统计负责人：</div>
              <div>填表人：</div>
              <div>
                填报日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              </div>
            </div>
            <div class="d-flex">
              <div>填报说明：</div>
              <div class="flex-1">
                <div>1．本表由融资性担保机构填报(年检不合格的辖内融资担保机构不参加数据报送)。</div>
                <div>
                  2．本表统计范围:本省（区、市）登记注册的融资担保法人机构及合伙制企业为统计对象全部汇总填报（本省（区、市）融资担保法人机构在省（区、市）外设立的分支机构的有关情况需汇总至法人机构统一填报。
                </div>
                <div>3．本报表为季报，报送时间为季后15日前。</div>
                <div>4.填列的金额保留两位小数。</div>
                <div>5.报表中划横线部分不需填列。</div>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="text-center pt-2" v-if="!isViewMode">
      <el-button type="primary" class="btn-long" :loading="submitLoading" @click="submit">
        保存
      </el-button>
      <el-button class="btn-long" @click="onClose">取消</el-button>
    </div>
  </div>
</template>

<script>
import { add } from '@vimi/utils-tool'
import { mapGetters } from 'vuex'
const columns = {
  1: { label: '1.流动性', label2: '1.1 流动性资产', rowspan: 3 },
  2: { label: '1.2 流动性负债' },
  3: { label: '1.3 流动性比率', max: 100 },
  4: { label: '2.放大倍数', label2: '2.1 融资性担保责任余额', rowspan: 3 },
  5: { label: '2.2 净资产' },
  6: { label: '2.3 融资性担保放大倍数' },
  7: { label: '3.代偿率', label2: '3.1 本年度累计担保代偿额', rowspan: 6 },
  8: { label: '其中：3.1.1 本年度累计融资性担保代偿额', class: 'text-indent' },
  9: { label: '3.2 本年度累计解除的担保额' },
  10: { label: '其中：3.2.1 本年度累计解除的融资性担保额', class: 'text-indent' },
  11: { label: '3.3 担保代偿率', max: 100 },
  12: { label: '3.4 融资性担保代偿率', max: 100 },
  13: { label: '4.代偿回收率', label2: '4.1 本年度累计代偿回收额', rowspan: 6 },
  14: { label: ' 其中：4.1.1 本年度累计融资性担保代偿回收额', class: 'text-indent' },
  15: { label: '4.2 年初担保代偿余额' },
  16: { label: '其中：4.2.1年初融资性担保代偿余额', class: 'text-indent' },
  17: { label: '4.3 代偿回收率', max: 100 },
  18: { label: '4.4 融资性担保代偿回收率', max: 100 },
  19: { label: '5.损失率', label2: '5.1 本年度累计担保损失额', rowspan: 4 },
  20: { label: '其中：5.1.1本年度累计融资性担保损失额', class: 'text-indent' },
  21: { label: '5.2 担保损失率', max: 100 },
  22: { label: '5.3 融资性担保损失率', max: 100 },
  23: { label: '6.拨备覆盖率', label2: '6.1 担保准备金', rowspan: '3' },
  24: { label: '6.2 担保代偿余额' },
  25: { label: '6.3 拨备覆盖率', max: 100 },
}
export default {
  components: {},
  props: {
    editMode: { type: Boolean, default: false },
  },
  data() {
    return {
      columns,
      loading: false,
      params: {
        index: 1,
        size: 1,
        'report_type.eq': 4,
        subKey: 'report_month_risk_detail.report_month_id',
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'report_month',
      reportMonth: {},
      reportDetail: [],
      submitLoading: false,
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId']),
    tdClass() {
      return this.isViewMode ? '' : 'input-td'
    },
    isViewMode() {
      if (this.editMode) {
        return false
      }
      return true
    },
  },
  watch: {},
  created() {
    this.params['service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    add,
    submit() {
      const date = new Date()
      if (
        date.getFullYear() === +this.reportMonth.year_number &&
        date.getMonth() === +this.reportMonth.month_number
      ) {
        this.updateData()
      } else {
        this.postData()
      }
    },
    updateData() {
      this.submitLoading = true
      const masterData = {
        report_month_id: this.reportMonth.report_month_id,
        service_id: this.clientId,
        submit_person_name: this.user.realName,
      }
      const slaveData = []
      this.reportDetail.forEach(item => {
        slaveData.push({
          id: item.id,
          report_month_id: item.report_month_id,
          year_begin_funds: item.year_begin_funds,
          period_funds: item.period_funds,
          period_end_funds: item.period_end_funds,
        })
      })
      const formData = {
        masterTableInfo: JSON.stringify(masterData),
        masterTableName: 'report_month',
        slaveTableInfo: JSON.stringify(slaveData),
        slaveTableName: 'report_month_risk_detail',
      }
      this.$api
        .relatedUpdate(this.$serviceName, formData)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('success', true)
          this.onClose()
        })
        .catch(() => {
          this.$message.error('保存失败，请重试！！')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    postData() {
      this.submitLoading = true
      const masterData = {
        month_number: new Date().getMonth(),
        year_number: new Date().getFullYear(),
        service_id: this.clientId,
        submit_person_name: this.user.realName,
        report_no: this.reportMonth.report_no,
        report_type: 4,
      }
      const slaveData = []
      this.reportDetail.forEach(item => {
        slaveData.push({
          order_num: item.order_num,
          year_begin_funds: item.year_begin_funds,
          period_funds: item.period_funds,
          period_end_funds: item.period_end_funds,
        })
      })
      const formData = {
        masterTableInfo: JSON.stringify(masterData),
        masterTableName: 'report_month',
        slaveTableInfo: JSON.stringify(slaveData),
        slaveTableName: 'report_month_risk_detail',
      }
      this.$api
        .relatedBatch(this.$serviceName, formData)
        .then(() => {
          this.$message.success('保存成功')
          this.$emit('success', true)
          this.onClose()
        })
        .catch(() => {
          this.$message.error('保存失败，请重试！！')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    initData() {
      this.reportDetail = []
      Object.keys(columns).forEach(key => {
        this.reportDetail.push({
          order_num: key,
        })
      })
    },
    getData(params) {
      this.initData()
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { ...this.params, ...params }, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.reportMonth = (data.data && data.data[0]) || {}
          const detail = this.reportMonth.report_month_risk_detail || []
          if (detail.length) {
            this.reportDetail = detail.sort((a, b) => a.order_num - b.order_num)
          }
          const date = new Date()
          if (
            date.getFullYear() === +this.reportMonth.year_number &&
            date.getMonth() === +this.reportMonth.month_number
          ) {
            this.$emit('back', false)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    onClose() {
      this.$emit('close', true)
    },
  },
}
</script>

<style lang="scss" scoped>
$report-td-border-color: #000;
.report-table {
  position: relative;
  tbody td {
    border: 1px solid $report-td-border-color;
    vertical-align: middle;
    text-align: center;
  }
}
.input-td {
  background: #ffffee;
}
.report-title {
  font-size: 1.5rem;
  font-family: '方正小标宋简体', 'SimSun', cursive;
  margin: 0;
  text-align: center;
}
.text-indent {
  text-indent: 1rem;
}
</style>
